<template>
    <div class="tian">
        <div class="tou">
            <div class="tou1">
                <img src="../../public/image/a01bf044b8a03f35aea21fa14151f94.jpg" alt="" width="70px" height="70px" class="op">
            </div>
            <div class="tou2">
                <div>用户名</div>
                <div>手机号</div>
            </div>
        </div>
        <div class="title">
            <div class="text">
                <i class="el-icon-trophy"></i>
                开通会员卡,预计年省999元
            </div>
            <div>
                <el-button type="warning" round>开通立减4元 ></el-button>
            </div>
        </div>

        <div class="body">
            <div>
                <div><b><big>200.00</big></b> </div>
                <div><small>账户余额</small> </div>
            </div>
            <div>
                <div><b><big>132</big></b></div>
                <div><small> 积分</small></div>
            </div>
            <div>
                <div><b><big>30</big></b> </div>
                <div><small> 优惠劵</small></div>
            </div>
        </div>

        <div class="title2">
            <div class="body2">
                <div>
                   <big><b>我的订单</b></big>  
                </div>
                <div>
                   <small>查看全部</small> 
                </div> 
            </div>
            <div class="body3">
                <div class="icon">
                    <div><big style="font-size:30px"><i class="el-icon-wallet"></i></big></div>
                    <div> 待支付</div>
                </div>
                <div class="icon">
                    <div><big style="font-size:30px"><i class="el-icon-box"></i></big></div>
                    <div>待发货</div> 
                </div>
                <div class="icon">
                    <div><big style="font-size:30px"><i class="el-icon-truck"></i></big></div>
                    <div>待收货</div> 
                </div>
                <div class="icon">
                    <div><big style="font-size:30px"><i class="el-icon-chat-dot-round"></i></big></div>
                    <div>待评价</div> 
                </div>
                <div class="icon">
                    <div><big style="font-size:30px"><i class="el-icon-sold-out"></i></big></div>
                    <div>售后</div> 
                </div>
            </div>
        </div>
        <div class="title2">
           <b><big>常用功能</big></b> 
            <div class="xia">
                <div class="icon">
                    <div><big style="font-size:30px"><i class="el-icon-location-information"></i></big></div>
                    <div>地址管理</div>
                </div>
                <div class="icon">
                    <div><big style="font-size:30px"><i class="el-icon-postcard"></i></big></div>
                    <div>发票管理</div>
                </div>
                <div class="icon">
                    <div><big style="font-size:30px"><i class="el-icon-star-off"></i></big></div>
                    <div>我的收藏</div>
                </div>
                <div class="icon">
                    <div><big style="font-size:30px"><i class="el-icon-date"></i></big></div>
                    <div>浏览记录</div>
                </div>
            </div>
            <div class="xia">
                <div class="icon"> 
                    <div><big style="font-size:30px"><i class="el-icon-user"></i></big></div>
                    <div>在线客服</div>
                </div>
                <div class="icon">
                    <div><big style="font-size:30px"><i class="el-icon-s-release"></i></big></div>
                    <div>意见反馈</div>
                </div>
                <div class="icon">
                    <div><big style="font-size:30px"><i class="el-icon-setting"></i></big></div>
                    <div>系统设置</div>
                </div>
                <div class="icon">
                    <div><big style="font-size:30px"><i class="el-icon-s-check"></i></big></div>
                    <div>关于我们</div>
                </div>
            </div>
        </div>
        <div class="xiakou"></div>
    </div>
</template>

<script>
export default {
    name: 'MyView',
    data() {
        return {};
    },
    props: {},

    components: {},

    created() {},

    mounted() {},

    methods: {},

    computed: {},

    watch: {},

    directives: {},

    filters: {}
};
</script>

<style scoped>
    .op{
        border-radius: 100px;
    }
    .kou{
        margin-bottom: 100px;
    }
    .tou{
        display: flex;
        margin: 0 auto;
        /* border: 1px solid; */
        width: 90%;
        padding: 10px;
        padding-top: 70px;
        margin: 10px;
        border-radius: 10px;
        align-items: center;
    }
    .tou1{
        width: 20%;
        padding: 10px;
        margin-top: 10px;
        /* border: 1px solid; */
    }
    .tou2{
       align-items: center;
   
       /* border: 1px solid ; */
    }
    .tian{
        background-color: rgb(231, 231, 231);
    }
    .title{
        display:flex;
        border: 1px solid;
        width: 90%;
        margin: 0 auto;
        justify-content: space-between;
        padding: 10px;
        background-color: rgb(103, 103, 103);
        border-radius: 10px  ;
        margin-bottom:10px;
        text-align: center;
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .text{
        text-align: center;
        color: rgb(255, 217, 0);
    }
    .body{
        padding: 10px;
        display: flex;
        width: 90%;
        justify-content: space-between;
        background-color: white;
        margin: 0 auto;
        /* padding: 20px;
        padding-left: 30px;
        padding-right: 30px; */
        border-radius: 10px; 
        height: 40%; 
        margin-bottom: 10px ;
    }
    .title2{
        padding: 10px;
        width: 90%;
        background-color:white;
        border-radius: 10px;
        margin: 0 auto;
        margin-bottom: 10px;
    }
    .body2{
        display: flex;
        justify-content: space-between;
        /* padding: 10px; */
    }
    .body3{
        display: flex;
        justify-content: space-between;
        padding: 10px;
    }
    .xia{
        display: flex;
        justify-content: space-between;
        /* padding: 10px; */
        padding-top: 60px;
    }
    .xiakou{
        padding-bottom: 100px;
    }
    .icon{
        /* align-items: center; */
        text-align: center;
        /* padding-left: 100px; */
        /* margin-right: 20px; */
    }

</style>
